<template>
  <div class="operate padding">
    <div class="formSearch">
      <el-form
        :inline="true"
        :model="query"
      >
        <el-form-item label="计划名称">
          <el-input v-model="query.operateName" maxlength="20" placeholder="请输入计划名称" />
        </el-form-item>
        <el-form-item label="运营人群">
          <el-input v-model="query.crowdName" maxlength="20" placeholder="请输入运营人群" />
        </el-form-item>
        <el-form-item label="计划方式">
          <el-select v-model="query.planMode" placeholder="请选择">
            <el-option
              v-for="item in planSelect"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="tagCustomer" label="计划时间">
          <div class="dateBox">
            <el-form-item>
              <el-date-picker
                v-model="query.dates"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button type="primary" @click="clearData">重置</el-button>
          <el-button type="primary" @click="handleCreate">新增</el-button>
          <el-button type="danger" @click="delData((id = null))">删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      v-loading="tableLoading"
      :data="tableData"
      border
      :header-cell-style="{
        background: '#EEF3FF',
        color: '#333333'
      }"
      tooltip-effect="dark"
      style="width: 100%"
      class="dataTable"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column
        prop="operateName"
        label="计划名称"
        width="220"
        align="center"
      />
      <el-table-column
        prop="crowdName"
        label="运营人群"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column label="计划方式" align="center" show-overflow-tooltip>
        <template #default="scope">
          <span v-if="scope.row.planMode === 1">自动长期计划</span>
          <span v-if="scope.row.planMode === 2">手动定时计划</span>
        </template>
      </el-table-column>
      <el-table-column
        width="400"
        label="时间"
        align="center"
        how-overflow-tooltip
      >
        <template #default="scope">
          <span v-if="scope.row.planMode === 1">{{ scope.row.planStart }} 至 {{ scope.row.planEnd }}</span>
          <span v-else>{{ scope.row.manualTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" show-overflow-tooltip>
        <template #default="scope">
          <span v-if="scope.row.state === 0">未开始</span>
          <span v-if="scope.row.state === 1">进行中</span>
          <span v-if="scope.row.state === 2">已结束</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" show-overflow-tooltip align="center">
        <template #default="scope">
          <div class="btnList">
            <el-button
              v-if="scope.row.state === 0"
              type="primary"
              link
              @click="edit(scope.row.shopOperateId)"
            >编辑</el-button>
            <el-button
              type="primary"
              link
              @click="showData(scope.row.shopOperateId)"
            >数据</el-button>
            <el-popconfirm
              v-if="scope.row.state === 0 || scope.row.state === 2"
              title="确认删除？"
              @confirm="delData(scope.row.shopOperateId)"
            >
              <template #reference>
                <el-button type="danger" link>删除</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="page.page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      background
      :total="page.total"
      style="margin: 30px 0 0 0;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-dialog
      v-model="visible.data"
      :close-on-click-modal="false"
      title="数据效果"
      width="55%"
      top="50px"
      class="group-dialog"
    >
      <el-table
        :data="dataInfo"
        border
        height="500"
        :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column
          align="center"
          prop="time"
          label="日期"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          prop="person"
          label="发券人数"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          prop="users"
          label="下单人数"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          prop="orders"
          label="下单笔数"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          prop="total"
          label="下单金额"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          prop="pays"
          label="支付人数"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          prop="payOrders"
          label="支付订单数"
          show-overflow-tooltip
        />
      </el-table>
    </el-dialog>
    <FormVue ref="formVueRef" @refresh="getAll" />
  </div>
</template>

<script setup>
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { getOperateList, deleteOperate, getDatasInfo } from '@/api/customer'

import FormVue from './form.vue';

defineComponent({
  name: 'OperatePage'
})

const planSelect = [
  {
    value: 1,
    label: '自动长期计划',
  },
  {
    value: 2,
    label: '手动定时计划',
  },
]
const tableLoading = ref(false)
let visible = reactive({
  data: false,
})

let page = reactive({
  page: 1,
  pageSize: 10,
  total: 0
});
let query = reactive({
  maxPrice: null, // 价格最大值
  maxStock: null, // 库存数量最大值
  minPrice: null, // 价格最小值
  minStock: null, // 库存数量最小值
  search: '', // 搜索字段
})

let tableData = ref([])
// 初始化查询所有数据
function getAll () {
  tableLoading.value = true
  getOperateList(Object.assign(
    {},
    page,
    query,
  )).then(res => {
    tableData.value = res.data.list
    page.total = res.data.total
  }).finally(() => {
    tableLoading.value = false
  })
}
// 手动查询商品
function search () {
  getAll()
}
function clearData () {
  query.search = ''
  query.maxPrice = null
  query.minPrice = null
  query.maxStock = null
  query.minStock = null
  page.page = 1
  getAll()
}
function handleCurrentChange (val) {
  page.page = val
  getAll()
}
function handleSizeChange (val) {
  page.pageSize = val
  getAll()
}

let multipleSelection = ref([]);
function handleSelectionChange (val) {
  multipleSelection.value = val
}

const formVueRef = ref();
function handleCreate () {
  formVueRef.value.show();
}

// 编辑
function edit (id) {
  formVueRef.value.show(id);
}

let dataInfo = ref([]);
function showData (id) {
  getDatasInfo({ shopOperateId: id }).then((res) => {
    if (res.code === '') {
      dataInfo.value = res.data
      visible.data = true
    } else {
      ElMessage.error(res.message)
    }
  })
}
function delData (id) {
  var ids = []
  if (id) {
    ids.push(id)
  } else {
    multipleSelection.value.forEach((item) => {
      ids.push(item.shopOperateId)
    })
    if (ids.length === 0) {
      ElMessage.warning('请选择要删除的运营计划')
      return false
    }
  }
  deleteOperate({ ids }).then((res) => {
    if (res.code === '') {
      ElMessage.success('删除成功')
      page.page = 1
      getAll()
    } else {
      ElMessage.error(res.message)
    }
  })
}

onMounted(() => {
  getAll()
})
</script>

<style lang="scss" scoped>
.padding {
  padding: 20px;
  margin-top: 20px;
  background-color: #FFFFFF;
}
</style>
